<template>
  <div class="main-page">
    <div class="header">
      <img src="@/assets/logo.png" alt="Logo" class="logo"/>
      <h1 class="title">kx与lhm共同制作</h1>
      <button @click="goToBorrowPage" class="action-button borrow">借阅书籍</button>
      <!-- 跳转到归还页面 -->
      <button @click="goToReturnPage" class="action-button return">归还书籍</button>
      <!-- 跳转到查阅页面 -->
      <button @click="goToSearchPage" class="action-button search">查阅书籍</button>
      <!-- 新增查询借阅记录按钮 -->
      <button @click="goToBorrowHistory" class="action-button history">查询借阅记录</button>
      <!-- 书籍管理界面 -->
      <button @click="goToManageBook" class="action-button manage-book">书籍管理</button>
      <!-- 用户管理界面 -->
      <button @click="goToManageUser" class="action-button manage-user">用户管理</button>
      <!-- 登出-->
      <button @click="logout" class="logout-button">登出</button>
    </div>
  </div>
</template>
<script>
// import SearchBar from "../components/icons/SearchBar.vue"; // 引入组件
import api from "@/api.js"

export default {
  methods: {
    // 跳转到借阅页面
    goToBorrowPage() {
      this.$router.push('/borrow');
    },
    // 跳转到归还页面
    goToReturnPage() {
      this.$router.push('/return');
    },
    // 跳转到查阅页面
    goToSearchPage() {
      this.$router.push('/search');
    },
    //跳转到查询借阅记录页面
    goToBorrowHistory() {
      this.$router.push('/borrow-History');
    },
    goToManageUser() {
      const role = localStorage.getItem("role");
      if (role !== "admin") {
        alert("仅有管理员可以使用");
      } else {
        this.$router.push("/manage-user");
      }
    },
    goToManageBook() {
      const role = localStorage.getItem("role");
      if (role !== "admin") {
        alert("仅有管理员可以使用");
      } else {
        this.$router.push("/manage-book");
      }
    },
    async logout() {
      const response = await api.logout();
      const data = response.data;
      if (data.code === 200) {
        alert('登出成功');
        api.removeToken();
        localStorage.removeItem('role');
        this.$router.push('/');
      } else {
        alert('登出失败');
        console.log(data.msg);
      }
    }
  }
}
</script>

<style scoped>

.main-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
}

.header {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.logo {
  width: 400px; /* 设置宽度 */
  height: auto; /* 保持比例 */
  display: flex;
  margin-top: -150px;
}

.title {
  margin-top: -70px;
  margin-left: 140px;
  position: absolute;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
}

/* 圆形按钮样式 */
.action-button {
  position: absolute;
  padding: 16px;
  font-size: 14px;
  font-weight:bold;
  color: #333;
  background: #f0f0f0; /* 按钮背景 */
  border: 4px solid transparent; /* 初始边框颜色透明 */
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  transition: all 0.2s ease; /* 添加过渡效果 */
}

.action-button:hover {
  transform: scale(1.05); /* 鼠标悬浮时略微放大 */
  border: 3px solid rgba(255, 0, 0,0.75);
}

.action-button:active {
  background: linear-gradient(145deg, #d4d4d4, #f0f0f0);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.action-button:focus {
  outline: none;
  box-shadow: 0 0 6px rgba(0, 123, 255, 0.6);
}



/* 按钮位置调整 */
.borrow {
  top: 32%;
  left: 28%;
}

.return {
  top: 32%;
  right: 28%;
}

.search {
  bottom: 28%;
  left: 38%;
}

.history {
  bottom: 28%;
  right: 38%;
}

.manage-book {
  top:10%;
  left: 38%;
}

.manage-user {
  top: 10%;
  right: 38%;

}
.logout-button {
  position: fixed;  /* 固定定位 */
  top: 20px;  /* 离顶部 20px */
  right: 20px;  /* 离右侧 20px */
  padding: 10px 20px;
  font-size: 14px;
  background-color: #fff;  /* 默认背景为白色 */
  color: #ff4d4d;  /* 按钮文字颜色 */
  border: 1px solid #ff4d4d;  /* 边框为红色 */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.logout-button:hover {
  background-color: #ff4d4d;  /* 悬浮时背景变为红色 */
  color: #fff;  /* 悬浮时文字颜色变为白色 */
}
</style>
